<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>借阅管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!-- 工具条 -->
      <el-col :span="24" class="toolbar">
        <el-form role="form" size="small" id="projectForm" class="form-horizontal details">
          <el-row>
            <el-col :xs="6" :lg="6" :sm="6" :md="6">
              <el-form-item :label-width="formLabelWidth" label="姓名:">
                <el-select v-model="filters.userId" filterable remote :remote-method="remoteMethodUseSearch"
                           :loading="useSearchLoading" placeholder="请选择用户">
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.name"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :lg="8" :sm="8" :md="8">
              <el-form-item :label-width="formLabelWidth" label="书名:">
                <el-select v-model="filters.bookId" filterable remote :remote-method="remoteMethodBookSearch"
                           :loading="bookSearchLoading" placeholder="请选择书籍">
                  <el-option
                    v-for="item in bookList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :lg="6" :sm="6" :md="6">
              <el-form-item :label-width="formLabelWidth" label="状态:">
                <el-select size="mini" v-model="filters.state" placeholder="请选择状态">
                  <el-option
                    v-for="item in stateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="4" :lg="4" :sm="4" :md="4" style="text-align: right;">
              <el-form-item label-width="0px">
                <el-button :loading="loading" router-preventReClick size="mini" type="primary" plain icon="el-icon-search" @click="handleSearch">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>

      <addForm size="mini" :call="search" icon="el-icon-plus" openType="add" type="primary" title="新增"/>
      <!-- 列表 -->
      <el-table :data="dataList" highlight-current-row @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="index" width="20"></el-table-column>
        <el-table-column prop="bookName" label="书名"></el-table-column>
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="count" label="数量" width="60"></el-table-column>
        <el-table-column prop="borrowTime" label="借出时间"></el-table-column>
        <el-table-column prop="backTime" label="归还时间"></el-table-column>
        <el-table-column prop="continueTime" label="续借时间"></el-table-column>
        <el-table-column prop="state" label="状态" :formatter="stateFormat"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: space-between;">
              <addForm :call="search" :data="scope.row" openType="back" size="mini" title="归还"/>
              <addForm :call="search" :data="scope.row" openType="continue" size="mini" title="续借"/>
              <el-button type="danger" @click="del(scope.$index, scope.row)" size="mini">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页栏 -->
      <el-col :span="24" class="toolbar">
        <el-pagination          style="margin-top: 10px"
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="page"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
        </el-pagination>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
  import addForm from './components/addForm';
  import apiBook from '@/api/apiBook';
  import api_user from '@/api/api_user';
  import apiHistory from '@/api/apiHistory';
  import apiClassification from '@/api/apiClassification';

  export default {
    data() {
      return {
        colLayOut: {xs: 12,sm:12,md:6, lg: 6},
        formLabelWidth: "160px",
        filters: {
          userId: null,
          bookId: null,
          state: null
        },
        dataList: [],
        total: 0,
        page: 1,
        pageSize: 10,
        loading: false,
        useSearchLoading:false,
        bookSearchLoading:false,
        showQueryCondition: false,
        stateList:[
          {value: 0,label: '借出'},
          {value: 1,label: '归还'},
          {value: 2,label: '续借'},
        ],
        userList:[],
        bookList:[],
        classificationList:[]
      }
    },
    //组件
    components: {
      addForm,
    },
    //方法
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.search();
      },
      handleSearch() {
        this.search();
        this.listClassification();
      },
      search() {
        let that = this;
        let params = {
          pageNo: that.page,
          pageSize: that.pageSize,
          ...this.filters,
        };

        that.loading = true;
        apiHistory.listHistoryByPage(params, (result)=>{
          if (result.code == '0') {
            that.loading = false;
            if (result && result.page.list) {
              that.total = result.page.total;
              that.dataList = result.page.list;
            }
          } else {
            that.loading = false;
            that.$message. error({
              showClose: true,
              message: result.msg,
              duration: 2000
            });
          }
        });

      },
      remoteMethodUseSearch(userName){
        let that = this;
        if (userName !== '') {
          this.useSearchLoading = true;
          let params = {
            name: userName
          }
          api_user.findList(params)
            .then(
              function (result) {
                that.useSearchLoading = false;
                if (result && result.page.rows) {
                  that.userList = result.page.rows;
                }
              },
              function (err) {
                that.useSearchLoading = false;
                that.$message.error({
                  showClose: true,
                  message: err.toString(),
                  duration: 2000
                });
              }
            )
        } else {
          that.userList = [];
        }
      },
      remoteMethodBookSearch(bookName){
        let that = this;
        if (bookName !== '') {
          let params1 = {
            name: bookName
          };

          that.bookSearchLoading = true;
          apiBook.listByPage(params1, (result)=>{
            this.bookSearchLoading=false;
            if (result.code == '0') {
              that.loading = false;
              if (result && result.page.list) {
                that.bookList = result.page.list;
              }
            } else {
              this.bookSearchLoading=false;
              that.$message. error({
                showClose: true,
                message: result.msg,
                duration: 2000
              });
            }
          });
        } else {
          that.bookList = [];
        }
      },
      stateFormat(row,cloumn){
        if(row.state==0){
          return "借出";
        }else if(row.state==1){
          return "归还";
        }else{
          return "续借";
        }
      },
      selsChange(sels) {
        this.sels = sels;
      },
      //删除
      del(index, row) {
        let that = this;
        this.$confirm('确认删除该记录吗,未归还的书籍将丢失?', '提示', {type: 'warning'}).then(() => {
          that.loading = true;
          apiHistory.deleteHistory({id:row.id}, (result) => {
            that.loading = false;
            if (result && result.code == '0') {
              that.$message.success({showClose: true, message: '删除成功', duration: 1500});
              that.search();
            } else {
              that.$message. error({showClose: true, message: result.msg, duration: 2000});
            }
          });
        })
      },
      //查询分类
      listClassification(){
        let that = this;
        let params = {
          pageNo: 1,
          pageSize: 10000
        };
        apiClassification.listByPage(params, (result)=>{
          if (result.code == '0') {
            if (result && result.page.list) {
              that.classificationList = result.page.list;
            }
          } else {
            that.$message.error({
              showClose: true,
              message: result.msg,
              duration: 2000
            });
          }
        });
      },
      classificationFormat(row,cloumn){
        const item = this.classificationList.find(item => item.classificationId === row.classification);
        return item ? item.classificationName : '';
      },
    },
    mounted() {
      this.handleSearch();

    }
  }
</script>

